<template>
    <div>
        <a-card style="margin-bottom:10px;">
            <div style="margin-left:0px; margin-top: -20px;">
                <a-menu style="margin-left:-30px" mode="horizontal" :default-selected-keys="['0']">
                    <a-menu-item @click="Change(1)" key="1">线路报障</a-menu-item>
                    <a-menu-item @click="Change(0)" key="0">运营商信息</a-menu-item>
                </a-menu>
            </div>
            <a-divider type="vertical" style="background-color: #f5f5f5;margin-top:0px ;" />
            <div style="margin-left:10px; margin-bottom: 10px;">
                <p style="padding-bottom:10px">字节数据中心互联的线路报障基础信息，包括公网，国内长传，海外BBONE，国内汇聚专线</p>
                <a href>
                    <icon-drive-file></icon-drive-file>使用指南
                </a>
            </div>
        </a-card>

        <a-card style="margin-bottom:10px; position: relative; ">
            <div style=" position: relative;">
                <a-button style="margin: 0 10px 0 10px;" @click="faultReport" type="primary">批量报障</a-button>
                <a-input-search
                    :style="{ width: '320px' }"
                    placeholder="查询线路编号/运营商名称/联系人"
                    @click="search"
                    search-button
                />
                <a-button
                    type="outline"
                    style="display: inline; position:absolute; right: 130px;"
                >模版下载</a-button>
                <div style="position:absolute; display: inline-block; right: 0;">
                    <a-upload action="/" />
                </div>
            </div>
        </a-card>
        <a-card style=" position: relative; ">
            <div
                style="margin-left:15px;display:inline-block;position: absolute;right: 2%;top:3.5%;;z-index:1"
            >
                <SortableTable class :columns="tableColumns" @update="onUpdateTable" />
            </div>
            <a-table
                :bordered="false"
                :loading="tableLoading"
                :data="dataList"
                :columns="tableColumns"
                :pagination="false"
                :rowKey="rowKey"
                @select="select"
            >
                <template #columns>
                    <a-table-column
                        v-for="item of tableColumns"
                        :key="item.key"
                        :align="item.align"
                        :title="item.title"
                        :width="item.width"
                        :data-index="item.key"
                        :fixed="item.fixed"
                    >
                        <template
                            v-if="item.key === 'index'"
                            #cell="{ rowIndex }"
                        >{{ rowIndex + 1 }}</template>
                        <template v-else-if="item.key === 'state'" #cell="{ record }">
                            <a-switch
                                style="pointer-events: none;"
                                @click="showState(record)"
                                v-model="record.state"
                                :checked-value="1"
                                :unchecked-value="0"
                            >
                                <template #checked>ON</template>
                                <template #unchecked>OFF</template>
                            </a-switch>
                        </template>

                        <template v-else-if="item.key === 'operate'" #cell="{ record }">
                          
                            <img
                                @click="edit(record)"
                                src="../../assets/write.png"
                                style="width:30px;height:30px; margin-left:5px"
                            />
                            <img
                                @click="deleteRow(record)"
                                src="../../assets/bash.png"
                                style="width:30px;height:30px;margin-left:5px"
                            />
                        </template>
                    </a-table-column>
                </template>
            </a-table>
        </a-card>
    </div>
</template>

<script lang="ts">

import { post } from '@/api/http'
import { getTableList } from '@/api/url'
import {
    usePagination,
    useRowKey,
    useRowSelection,
    useTable,
    useTableColumn,
} from '@/hooks/table'
import { useRouter } from "vue-router";
import { FormItem } from '@/types/components'
import { TablePropsType } from '@/types/components'
import { Message } from '@arco-design/web-vue'
import { defineComponent, onMounted, ref, reactive } from 'vue'
import type { Dayjs } from 'dayjs'
import { sortColumns } from '@/utils'
import { number } from 'echarts/core'
import { Modal } from '@arco-design/web-vue'
export default defineComponent({
    name: 'TableWithSearch',
    setup() {
        //为了批量报障而服务，push过去那个页面的内容,push前需要创建飞书文档嘿嘿
        let faultMsg = {
            vendorId: 0,
            aDevice: [],
            zDevice: [],
            aPort: [],
            zPort: [],
            faultDescUrl: '',
            lineNum: '',
            lineType: 1
        }
        const router = useRouter()
        const searchForm = ref()
        const pagination = usePagination(doRefresh)
        const { selectedRowKeys, onSelectionChange } = useRowSelection()
        const table = useTable()
        const rowKey = useRowKey('id')//id是key 所以rowkey你可以拿到的是id号
        const rowSelection = {
            type: 'checkbox',
            showCheckedAll: true
        }
        const tableColumns = reactive(useTableColumn([
            table.indexColumn,
             {
                title: '商务线路编号',
                key: 'lineNum',
                dataIndex: 'lineNum',
            },
            {
                title: '运营商名称',
                key: 'name',
                dataIndex: 'name',
            },
            {
                title: '联系人',
                key: 'vendorResponser',
                dataIndex: 'vendorResponser',
            },
            {
                title: '联系电话',
                key: 'phone',
                dataIndex: 'phone',
            },
            {
                title: '邮箱',
                key: 'mail',
                dataIndex: 'mail',
            },
            {
                title: '简称',
                key: 'nameSimple',
                dataIndex: 'nameSimple',
            },
            {
                title: '创建时间',
                key: 'ctime',
                dataIndex: 'ctime',
            },
           
            {
                title: '更新时间',
                key: 'mtime',
                dataIndex: 'mtime',
            },
            {
                title: '操作',
                key: 'operate',
                dataIndex: 'operate',
            },
        ]))

        function doRefresh() {
            post({
                url: getTableList,
                data: () => {
                    return {
                        page: pagination.page,
                        pageSize: pagination.pageSize,
                    }
                },
            })
                .then((res) => {
                    console.log(res);
                    table.handleSuccess(res)
                    pagination.setTotalSize(res.totalSize || 10)
                })
                .catch(console.log)
        }
        function onSearch() {
            Message.success(
                '模拟查询成功，参数为：' +
                JSON.stringify(
                    conditionItems.reduce((pre, cur) => {
                        ; (pre as any)[cur.key] = cur.value.value
                        return pre
                    }, {})
                )
            )
        }
        function onResetSearch() {
            conditionItems.forEach((it) => {
                it.reset ? it.reset() : (it.value.value = '')
            })
        }



        function search() {
            console.log("search被调用了")
        }
        function select(id: Array<number>) {//此处就可以进行预检了
            // if (Object.keys(faultMsg).length === 0) {//0-1
            if (id.length != 0 && faultMsg.lineNum == '') {
                // let msg=table.dataList[id-1];//看看能不能全赋值
                // faultMsg.lineNum=table.dataList[id-1].lineNum;
                faultMsg = table.dataList[id[0] - 1] //应该得有type
                console.log(faultMsg)
                return;
            }
            if (id.length == 0) {//1-0
                faultMsg.lineNum = ''
                console.log('变为0')
                return;
            }
            let curLink = table.dataList[id[id.length - 1]]
            if (curLink.linkNum !== faultMsg.linkNum) {
                console.log('error')
                Modal.warning({
                    title: 'Warning',
                    content: '当前的选择项与已选择的线路不是同一条，请重新选择'
                });
                //取消一下那一行的选择
                id.pop()

            } else {//port
                faultMsg.portMsg.push(curLink.portMsg)
            }
        }
        function faultReport() { //在此处去通过vendor id搞事情，虽然说vendor id只有一个
            // post({
            //         url: 'report',//后端那个搞到飞书链接的url
            //     })
            //         .then((res) => {
            //             console.log(res);
            //             faultMsg.faultDescUrl=res.data.faultDescUrl
            //         })
            //         .catch(console.log)
            console.log('faultReport')

            faultMsg.lineFault = true
            console.log(faultMsg)
            router.push({
                name: 'form',
                //   path: "/form/base-form-view",
                params: {
                    data: JSON.stringify(faultMsg)
                }
            });
        }
        function edit(record: any) {
            router.push({
                name: 'lineForm',
                //   path: "/form/base-form-view",
                params: {
                    data: JSON.stringify(record)
                }
            });
        }
        function showState(args: any) {//此
            // args.state=(args.state)?0:1
            // console.log(args)
        }
        function onUpdateTable(newColumns: Array<TablePropsType>) {
            sortColumns(tableColumns, newColumns)
        }
        function Change(args: number) {
            console.log("666")
            if (args) {
                router.push({
                 //   name: 'lineForm',  //   
                 path: "/list/table-with-search",
                });
            } else {
                router.push({
                      path: "/list/vendorMsg",
                });
            }

        }
        onMounted(doRefresh)
        return {
            ...table,
            rowKey,
            pagination,
            searchForm,
            tableColumns,
            //  conditionItems,
            onSearch,
            onResetSearch,
            selectedRowKeys,
            onSelectionChange,
            search,
            select,
            rowSelection,
            faultReport,
            showState,
            edit,
            onUpdateTable,
            Change
        }
    },
})
</script>

<style lang="less" scoped>
.avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;
    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
    .avatar-vip {
        border: 2px solid #cece1e;
    }
    .vip {
        position: absolute;
        top: 0;
        right: -9px;
        width: 15px;
        transform: rotate(60deg);
    }
}
.gender-container {
    .gender-icon {
        width: 20px;
    }
}
</style>
